<!DOCTYPE html>
<html >
	<head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, width=device-width"/>
        <meta name="format-detection" content="telephone=no"/>
        <title>工单详情</title>
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
        <link rel="stylesheet" type="text/css" href="../../css/api.css" />
        <link rel="stylesheet" type="text/css" href="../../css/list-format.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
		<style>
			.aui-content-wxx {
				width: 100%;
				margin: 0;
			}

			.aui-content-wxx ul {
				background-color: #fff;
				border-radius: 0;
				overflow: hidden;
				margin-bottom: 10px;
				padding: 0 3%;
				word-break: break-all;
			}
		</style>
	</head>
	<body style="width: 100%">
		<div class="aui-content aui-content-wxx" id="app" v-cloak>
<!--			<ul class="aui-list-view" v-show="entity.id">-->
			<ul class="aui-list-view" >
				<div class="darktitle" ><h2><img class="tit_img" src="../../image/bt_icon2.png" alt=""/>工单信息</h2></div>
				<yt-table-field label="工单编码">{{entity.id}}</yt-table-field>
				<yt-table-field label="工单类型">{{entity.alarmLittleTypeName}}</yt-table-field>
				<yt-table-field label="业务分类">{{entity.busiTypeText}}</yt-table-field>
				<yt-table-field label="工单级别"><span style="color:red;">{{entity.importance}}</span></yt-table-field>
				<yt-table-field label="接单角色">{{entity.receivingRole}}</yt-table-field>
				<yt-table-field label="派单时间">{{entity.createTime}}</yt-table-field>
				<yt-table-field label="派单方式">{{entity.sendOrderType}}</yt-table-field>
				<yt-table-field label="工单解决期限">{{entity.workTimeLimit}}</yt-table-field>
				<yt-table-field label="接单超时预警">{{entity.timeOutLong}}小时</yt-table-field>
				<yt-table-field label="问题描述">{{entity.alarmNote}}</yt-table-field>
				<template v-if="haveReceiptImage">
					<div class="darktitle" ><h2><img class="tit_img" src="../../image/bt_icon2.png" alt=""/>回单图片</h2></div>
					<div class="cardCon2">
						<ul class="aui-list-view aui-grid-view">
<!--							<li class="aui-list-view-cell aui-img aui-col-xs-4" >-->
<!--								<img class="aui-img-object" :src="receiptImageUrl" @click="showImg(receiptImageUrl)">-->
<!--							</li>-->
							<li class="aui-list-view-cell aui-img aui-col-xs-4" v-for="(item,index) in receiptImageList" >
								<img class="aui-img-object" :src="getShowImgUrl(item)" @click="showImgItem(item)">
							</li>
						</ul>
					</div>
				</template>
				<template v-if="haveTransferImage">
					<div class="darktitle" ><h2><img class="tit_img" src="../../image/bt_icon2.png" alt=""/>转派图片</h2></div>
					<div class="cardCon2">
						<ul class="aui-list-view aui-grid-view">
<!--							<li class="aui-list-view-cell aui-img aui-col-xs-4" >-->
<!--								<img class="aui-img-object" :src="transferImageUrl" @click="showImg(transferImageUrl)">-->
<!--							</li>-->
							<li class="aui-list-view-cell aui-img aui-col-xs-4" v-for="(item,index) in transferImageList" >
								<img class="aui-img-object" :src="getShowImgUrl(item)" @click="showImgItem(item)">
							</li>
						</ul>
					</div>
				</template>
			</ul>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/config.js"></script>
	<script type="text/javascript" src="../../script/vue.js"></script>
	<script type="text/javascript" src="../../script/vueComponent.js"></script>
	<script type="text/javascript" src="../../script/request.js"></script>
	<script type="text/javascript" src="../../script/lcApi.js"></script>
<!--	<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.1/vconsole.min.js"></script><script >var vConsole = new VConsole();</script>-->
	<script>
		var app = new Vue({
			el:'#app',
			data(){
				return {
					entity:{},
					userInfo:{},
					haveReceiptImage:false,
					receiptImageUrl:"",
					haveTransferImage:false,
					transferImageUrl:"",
					receiptImageList:[],
					transferImageList:[],
				}
			},
			mounted(){
				this.userInfo = $api.getStorage("user") || {};
				// this.haveReceiptImage = true;
				// this.receiptImageUrl = request.lcApi.getShowImgUrl("/zcyy/20220114/e50d85dd-bfe0-4410-b6d9-b35af07f1620.gif");
				// this.haveTransferImage = true;
				// this.transferImageUrl = request.lcApi.getShowImgUrl("/zcyy/20220114/e50d85dd-bfe0-4410-b6d9-b35af07f1620.gif");
			},
			methods:{
				onload(){
					request.lcApi.getReceiptImgList(this.entity.id,this.userInfo.loginname,(res)=>{
						if(res && res.length > 0){
							// 获取最后一张
							let imgInfo = res[res.length - 1];
							this.haveReceiptImage = true;
							this.receiptImageUrl = request.lcApi.getShowImgUrl(imgInfo.FILE_ABS_PATH);
							this.receiptImageList = res;
						}
						console.log(res);
					})
					request.lcApi.getTransferImgList(this.entity.id,this.userInfo.loginname,(res)=>{
						if(res && res.length > 0){
							// 获取最后一张
							let imgInfo = res[res.length - 1];
							this.haveTransferImage = true;
							this.transferImageUrl = request.lcApi.getShowImgUrl(imgInfo.FILE_ABS_PATH);
							this.transferImageList = res;
						}
						console.log(res);
					})
				},
				showImg(url){
					var imageBrowser = api.require('imageBrowser');
					imageBrowser.openImages({
						imageUrls: [url],
						showList: false
					});
				},
				getShowImgUrl(item){
					return request.lcApi.getShowImgUrl(item.FILE_ABS_PATH);
				},
				showImgItem(item){
					this.showImg(this.getShowImgUrl(item));
				}
			}
		});

		apiready = function() {
			if(!window.api){
				window.env = {};
				env.lcServerBaseUrl = "http://chntoms.tower0788.cn:8989/";
				window.api = {}
				api.showProgress = function(){};
				api.hideProgress = function(){};
			}
			api.sendEvent({
				name: 'getDetailInfo',
				extra: {frameName:"detailGroupFrm0"}
			});
		};

		function detailOnLoad(ret){
			app.entity = ret;
			app.onload();
		}

	</script>
</html>
